<template>
  <el-dialog v-model="compReportVisible" title="完工报告"  @opened="opened"  width="80%"  @close="closeTxDialog" >
      <div class="page-container">
        <el-card>
          <template #header>
            <div>{{ywItem.name}}-子项目列表</div>
          </template>
          <el-table :data="list" style="width: 100%" border>
            <el-table-column align="center" prop="no" label="子项目编号" width="180"> </el-table-column>
            <el-table-column align="center" prop="name" label="接单人" width="100"> </el-table-column>
            <el-table-column align="center" prop="phone" label="手机号" width="120"> </el-table-column>
            <el-table-column align="center" prop="cardId" label="身份证号" width="220"> </el-table-column>
            <el-table-column align="center" prop="cost" label="服务金额（元）" width="120">
              <template #default="scope">
                {{ proxy?.convertFenToYuan(scope.row.cost)}}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="taskStatus" label="完工状态">
              <template #default="scope">
                <dict-tag :options="woker_task_status" :value="scope.row.taskStatus" />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="taskPic" label="附件">
              <template #default="scope">
                <ImagePreview
                  v-if="scope.row.taskPic"
                  :width="50"
                  :height="50"
                  :src="scope.row.taskPic"
                  :preview-src-list="getPicList(scope.row.taskPic)"
                />
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
        </el-card>
      </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {taskEnrollSuccesslist} from "@/api/projectMgt/proSel/index"
const pros = defineProps(['title','openCheck','id','item']);
const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { woker_task_status} = toRefs<any>(proxy?.useDict('woker_task_status'));

const dialogVisible = ref<boolean>(false)
const loading = ref<boolean>(false)
const compReportVisible= ref(false)
const ywItem = ref({})
const list = ref([])
const editRecord = ref({
  taskDesc: '',
  taskRemark: '',
  taskPic: ''
})
const queryParams = ref({
  pageNum:1,
  pageSize:10,
  taskId:null
})


compReportVisible.value = pros.openCheck;
ywItem.value = pros.item;

console.log(ywItem.value )

/**
 * 查询完工确认单
*/
const route = useRoute();
const res =ref({})
const total = ref(0);


 const closeTxDialog =()=>{
      compReportVisible.value = false;
      emit('dialogClose',{tag:1});
 }

const opened = ()=>{
    getList();
}

const getList = ()=>{
   queryParams.value.taskId = ywItem.value.id;
    taskEnrollSuccesslist({
        ...queryParams.value
    }).then(res=>{
      list.value = res.rows;
      total.value = res.total;
    });

}
/**
 * 验收操作
*/
const approval = async (opinion) => {
  loading.value = true
  useRequest('/payment/taskEnroll/acceptance', 'put', {
      data: {
          id: editRecord.value.id,
          taskId: editRecord.value.taskId,
          taskStatus: opinion,
          taskRemark: editRecord.value.taskRemark
      }
  }, {
       immediate: true,
        onFinish: () => {
              loading.value = false
       },
       onSuccess: data => {
          if (data?.value?.code === HttpStatus.success) {
               ElMessage.success(data?.value?.msg || '操作成功')
           }
       }
   })
}


  const getPicList = (picStr:any)=>{
    return picStr.split(",");
  }


 watch(() => pros.openCheck, async val => {
        compReportVisible.value =  val;
    }
  );

 watch(() => pros.item, async val => {
      ywItem.value = val;
    }
  );

</script>

<style scoped lang="scss">
.page-container {
  /*height: calc(100vh - 200px);*/
  height:60%;
  overflow-y: auto;
  .footer {
    background: #fff;
    text-align: center;
    z-index: 999;
    margin-top: 20px;
  }
}
</style>
